<template>
  <view class="login-container">
    <view class="title">用户登录</view>
    <view class="form">
      <input v-model="username" placeholder="用户名" class="input" />
      <input v-model="password" placeholder="密码" type="password" class="input" />
      <view class="btn-group">
        <button class="login-btn" @click="onLogin">登录</button>
        <button class="register-btn" @click="goToRegister">注册</button>
      </view>
    </view>
    <view v-if="msg" class="msg">{{ msg }}</view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const username = ref('')
const password = ref('')
const msg = ref('')

function onLogin() {
  uni.request({
    url: '/api/user/login',
    method: 'POST',
    header: {
      'Content-Type': 'application/json'
    },
    data: {
      username: username.value,
      password: password.value
    },
    success: (res) => {
      if (res.data.code == 0) {
        msg.value = '登录成功'
		const userArr = res.data.data;
    	uni.setStorageSync('userList', userArr);
        uni.switchTab({ url: '/pages/index/index' })
      } else {
        msg.value = res.data.message || '登录失败'
      }
    },
    fail: () => {
      msg.value = '请求失败'
    }
  })
}

function goToRegister() {
  uni.navigateTo({
    url: '/pages/registered/registered'
  })
}
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  background: #f7f7f7;
  padding: 40rpx 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
}
.form {
  width: 100%;
  max-width: 500rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  padding: 30rpx 20rpx;
  display: flex;
  flex-direction: column;
  gap: 18rpx;
}
.input {
  height: 48rpx;
  border-radius: 8rpx;
  border: 1rpx solid #eee;
  font-size: 28rpx;
  padding: 0 16rpx;
  background: #f4f4f4;
}
.btn-group {
  display: flex;
  gap: 18rpx;
  margin-top: 18rpx;
}
.login-btn, .register-btn {
  flex: 1;
  height: 54rpx;
  font-size: 30rpx;
  border: none;
  border-radius: 12rpx;
}
.login-btn {
  background: #2B9939;
  color: #fff;
}
.register-btn {
  background: #e53935;
  color: #fff;
}
.msg {
  margin-top: 30rpx;
  font-size: 28rpx;
  color: #e53935;
}
</style>